<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系选择器</title>

    <style>
        /* 后代选择器 书写方式
            选择器1 选择器2
            解释：选中选择器1 下面的 所有满足选择器2 的元素
        */
        ol li{
            color: red;
        }

        /* 后代可以跨越阶级，因此可直接跟在后面 */
        ul li{
            color: green;
        }

        /* 子代选择器 书写方式（只能是子代）
            选择器1>选择器2
            解释：选择选择器1下满足选择器2的元素
        */

        /* 通配符选择器
        /* { 
            /* 表示选中文档中所有的标签 */
        /* } */
    </style>
</head>
<body>
    <!-- 
        关系选择器，根据元素在文档中的嵌套关系去选择对应的标签
        根据元素在结构中的位置去缩小选择范围
     -->

     <!-- 红色 -->
     <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
     </ol>

     <!-- 绿色 -->
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
     </ul>
</body>
</html>